import { defineView } from "@/routers/tools.mjs";

class InvoiceController {
  static $inject = ["currencyConverter"];

  constructor(
    /** @type {import("./types").CurrencyConverterType} */ currencyConverter,
  ) {
    /**
     * @type {('USD' | 'EUR' | 'CNY')[]}
     */

    this.currencies = currencyConverter.currencies;
    this.currencyConverter = currencyConverter;
  }

  /**
   * @param {'USD' | 'EUR' | 'CNY'} outCurr
   * @returns {number}
   */
  total(outCurr) {
    return this.currencyConverter.convert(
      this.qty * this.cost,
      this.inCurr,
      outCurr,
    );
  }

  pay() {
    // eslint-disable-next-line no-alert
    window.alert("Thanks!");
  }

  qty = 1;

  cost = 2;

  /**
   * @type {'USD' | 'EUR' | 'CNY'}
   */
  inCurr = "EUR";
}

const svView = defineView({
  controller: InvoiceController,
  controllerAs: "$invoiceCtrl",
  template: /* HTML */ html`
    <div>
      <b>Invoice:</b>
      <div>
        Quantity:
        <input
          class="form-control"
          type="number"
          min="0"
          ng-model="$invoiceCtrl.qty"
          required
        />
      </div>
      <div>
        Costs:
        <input
          class="form-control"
          type="number"
          min="0"
          ng-model="$invoiceCtrl.cost"
          required
        />
        <select ng-model="$invoiceCtrl.inCurr">
          <option ng-repeat="c in $invoiceCtrl.currencies">{{ c }}</option>
        </select>
      </div>
      <div>
        <b>Total:</b>
        <p ng-repeat="c in $invoiceCtrl.currencies">
          {{ $invoiceCtrl.total(c) | currency:c }}
        </p>
        <br />
        <button class="btn" ng-click="$invoiceCtrl.pay()">Pay</button>
      </div>
    </div>
  `,
});

export default svView;
